<template>
  <div
    style="display:flex;flex-direction: row;justify-content:space-between;align-items:center;"
  >
    <div style="width: 10%;">
      <router-link to="/index">
        <img
          src="../assets/image/logo.png"
          alt=""
          style="width:60px;height:60px;border-radius:10px;margin-top:20px;"
        />
        <!-- <el-image
          style="width:80px;height:80px"
          src="../assets/image/logo.png"
          fit="fill"
        ></el-image> -->
      </router-link>
    </div>
    <div class="center">
      <img
        src="../assets/image/title2.png"
        alt=""
        style="height:80px;padding-top:10px;"
      />
    </div>
    <div class="right" style="display:flex;align-item:center;">
      <el-dialog
        title="反馈"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <el-input
          v-model="textarea"
          rows="8"
          type="textarea"
          placeholder="请输入您的反馈内容"
        />
        <el-button @click="submit" class="submit1">提交</el-button>
      </el-dialog>
      <!-- <div style="width: 55%;background-color:#0000FF"></div> -->
      <div style="width: 25%;">
        <div style="margin-top:18px;">
          <el-dropdown>
            <div class="info" style="display:flex;">
              <!-- <el-image :src="imgurl" fit="fill" style="width:50px;height:50px">
              </el-image> -->
              <el-avatar
                shape="square"
                size="40"
                fit="fill"
                :src="imgurl"
                style="margin-right:10px"
              ></el-avatar>
              <div style="margin: 5px; height: 1px; ">
                <span
                  >{{ name }}
                  <i
                    class="icon el-icon-arrow-down"
                    style="margin-left:0px;"
                  ></i
                ></span>
              </div>
            </div>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                ><span class="iconfont icon-gerenxinxi"></span
                ><span class="mymenu" @click="myinfo"
                  >个人信息</span
                ></el-dropdown-item
              >

              <el-dropdown-item @click="mybag"
                ><span class="iconfont icon-yonghufankui4"></span
                ><span class="mymenu" @click="feed"
                  >反馈</span
                ></el-dropdown-item
              >
              <el-dropdown-item @click="mybag"
                ><span class="iconfont icon-fanshe"></span
                ><span class="mymenu" @click="logout"
                  >退出登录</span
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <!-- 个人信息对话框 -->
        <el-dialog :visible.sync="infodialog" width="40%" top="15px">
          <div class="info">
            <el-form ref="form" :model="userinfo" label-width="80px">
              <el-form-item label="学号">
                <el-input v-model="userinfo.id" disabled></el-input>
              </el-form-item>

              <el-form-item label="用户名">
                <el-input type="text" v-model="userinfo.name"></el-input>
              </el-form-item>

              <el-form-item label="性别">
                <el-radio-group v-model="userinfo.sex" style="text-align:left;">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="年龄">
                <el-input type="text" v-model="userinfo.age"></el-input>
              </el-form-item>
              <el-form-item label="电话">
                <el-input type="text" v-model="userinfo.phone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input type="text" v-model="userinfo.email"></el-input>
              </el-form-item>
              <el-form-item label="头像">
                <el-upload
                  action="http://localhost:8090/fileload"
                  list-type="picture"
                  :on-success="uploadover"
                >
                  <el-tag>上传图片</el-tag>
                </el-upload>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit"
                  >保存并提交</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
        <!-- 我的背包对话框 -->
        <el-dialog title="提示" :visible.sync="bagdialog" width="30%">
          11
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgurl: "https://images6.alphacoders.com/552/thumbbig-552086.webp",
      name: "joker",
      content: "",
      dialogVisible: false,
      textarea: "",
      infodialog: false,
      bagdialog: false,
      userinfo: {
        id: "",
        name: "",
        age: "",
        sex: "",
        email: "",
        phone: "",
        img: "",
      },
    };
  },
  created() {
    // this.imgurl = window.sessionStorage.getItem("tokenimg");
    // this.name = window.sessionStorage.getItem("tokenname");
    // this.userinfo.img = this.imgurl;
    this.getAllinfo();
  },
  methods: {
    myClick() {},

    handleClose(done) {
      this.$confirm("退出将不会保存，是否退出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          done();
          this.$message({
            type: "info",
            message: "取消反馈",
          });
        })
        .catch(() => {
          //   this.$message({
          //     type: "info",
          //     message: "已取消删除",
          //   });
        });
    },
    feed() {
      this.dialogVisible = true;
    },
    submit() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      let time = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      let obj = {
        content: this.textarea,
        username: window.sessionStorage.getItem("tokenname"),
        userid: window.sessionStorage.getItem("tokenid"),
        userimg: window.sessionStorage.getItem("tokenimg"),
        time: time,
      };
      this.$http.post("http://localhost:8090/addback", obj).then((res) => {
        if (res.data.code == 0) {
          (this.textarea = ""),
            (this.dialogVisible = false),
            this.$message.success("😁感谢您的反馈~");
        }
      });
    },
    myinfo() {
      this.infodialog = true;
    },
    mybag() {
      this.bagdialog = true;
    },
    onSubmit() {
      this.$http
        .post("http://localhost:8100/students/perfect", this.userinfo)
        .then((res) => {
          console.log(res);
          this.$message.success("上传成功");
          this.infodialog = false;
          window.sessionStorage.setItem("tokenname", this.userinfo.name);
          this.getAllinfo();
        });
    },
    uploadover(res) {
      console.log(res);
      this.userinfo.img = res.msg;
    },
    getAllinfo() {
      let id = window.sessionStorage.getItem("tokenid");
      this.$http
        .post("http://localhost:8100/students/getinfo", {
          id: id,
        })
        .then((res) => {
          console.log(res);
          this.userinfo = res.data;
          this.imgurl = res.data.img;
          this.name = res.data.name;
        });
    },
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
      this.$message.warning("退出登录");
    },
  },
};
</script>

<style scoped>
.a:hover {
  color: #00aaff;
}
.submit1 {
  display: block !important;
  margin: 20px auto !important;
  color: white !important;
  background-color: rgb(104, 159, 231) !important;
}
.mymenu {
  margin-left: 7px;
}
.info .el-input {
  width: 300px;
}
.info .el-form {
  width: fit-content;
  display: block;
  margin: 0 auto;
  /* text-align: center; */
}
.right {
  display: flex;
  margin-right: 5px;
}
</style>
